<!DOCTYPE html>
<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="../css/theme.css">
    <link rel="preconnect" href="https://fonts.gstatic.com"> 
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com"> 
    <link href="https://fonts.googleapis.com/css2?family=Merriweather&display=swap" rel="stylesheet">
</head>



<body>
    <div class="nav" style="position:absolute;top:0;">
        <a href="#">
            <span class="logo">
                <img src="../images/logo4.png" width='80' height='60'">
            </span>
        </a>
        <ul class="nav" >
            <li><a class="item" id="active" href="./home.html">主页</a></li>
            <li><a class="item" href="./more.html">了解更多</a></li>
            <li><a class="item" href="./passage.html">相关内容</a></li>
            <li><a class="item" href="./about.html">关于我们</a></li>
        </ul>
    </div>
    <div>
        <div style="height:3800px;margin-top: 0;">
            <div id="test" style="height:100vh;background-color: rgb(190, 190, 190);position:sticky;top:0;overflow: hidden;">
                <img id="fs" src="../images/factory/facsky.svg" style="position:absolute;width:100%;top: 0;">
                <div style="text-align:center;position:absolute;top:25vh;left:20%;right: 20%;">
                    <span style="color:#fff;font-size:30px;text-shadow: 0 0 5px rgba(0, 0, 0, 0.76);">我们的小故事</br></span>
                    <span class="heading" style="color:rgb(255, 255, 255);font-size:60px;font-weight: bold;text-shadow: 0 0 5px rgba(0, 0, 0, 0.76);">二氧化碳的冒险</br></span>
                    <span style="color:rgb(255, 255, 255);font-size:18px;font-weight: lighter;text-shadow: 0 0 5px rgba(0, 0, 0, 0.76);">这是一个关于二氧化碳的小故事，或者说都算不上是故事，只是一个小小的介绍。我们希望通过这个小故事，您能了解到碳中和提出的背景是什么？这些碳从哪来？会造成什么危害？我们应该如何实现碳中和？等等等等。如果您有一点兴趣，就请向下滑动吧</span>
                </div>
                <img id="f1" src="../images/factory/fac1.svg" style="position:absolute;width:100%;bottom: 0;">
                <img id="f2" src="../images/factory/fac2.svg" style="position:absolute;width:100%;bottom: 0;">
                <img id="f3" src="../images/factory/fac31.svg" style="position:absolute;width:100%;bottom: 0;">
                <img id="smoke" src="../images/factory/fac32.svg" style="position:absolute;width:100%;opacity: 0;bottom: 0;">
                <img id="co2f" src="../images/single/co2.svg" style="position:absolute;height: 10vh;top:5vh;right: -10vh;">
                <img id="w1" src="../images/word/w1.svg" style="position:absolute;height: 15vh;top:5vh;right: 35vh;opacity: 0;">
                <img id="car" src="../images/single/car.svg" style="position:absolute;width:20%;bottom: 0;left:-25%;">
            </div>
        </div>
        <div style="height:13000px;margin-top: 0;margin-top: -450vh;">
            <div id="div5" style="height:100vh;position:sticky;top:0;overflow: hidden;opacity: 0;">
                <img src="../images/life/lsky.svg" style="position:absolute;width: 100%;top:0;">
            </div>
            <div id="div4" style="height:100vh;position:sticky;top:0;overflow: hidden;opacity: 0;">
                <img src="../images/farm/farm1.svg" style="position:absolute;width: 100%;top: 0;">
                <img src="../images/farm/farm2.svg" style="position:absolute;width: 100%;bottom: 0;">
            </div>
            <div id="div3" style="height:100vh;position:sticky;top:0;overflow: hidden;">
                <img src="../images/life/bg.svg" style="position:absolute;width: 100%;bottom: -10vh;">
                <img src="../images/life/f.svg" style="position:absolute;width: 100%;bottom: 0;">
                <img id="co2l" src="../images/single/co2.svg" style="position:absolute;height: 10vh;top:5vh;left: -10vh;">
                <img id="w2" src="../images/word/w2.svg" style="position:absolute;height: 15vh;top:45vh;left: 10vh;opacity: 1;">
            </div>
            <div style="height:100vh;position:sticky;top:0;overflow: hidden;">
                <div style="opacity:1;width:100%;position:absolute;height: 100vh;text-align: left;left: 40%;top: 10vh;">
                    <span id="s1" style="color:rgb(34, 34, 34);font-size:60px;font-weight: bold;text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);opacity: 0;">生产生活</span>
                    <span id="s2" style="color:rgb(34, 34, 34);font-size:60px;font-weight: bold;text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);opacity: 0;">畜牧养殖</br></span>
                    <span id="s3" style="color:rgb(34, 34, 34);font-size:60px;font-weight: bold;text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);opacity: 0;">等都会产生间接碳排放</br></span>
                </div>
            </div>
            <div id="div7" style="height:100vh;position:sticky;top:0;overflow: hidden;-webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);">
            </div>
            <div id="div6" style="height:100vh;position:sticky;top:100vh;overflow: hidden;">
                <img src="../images/single/up.svg" style="position:absolute;height:100vh;width:100%;">
                <div style="opacity:1;width:100%;position:absolute;height: 100vh;text-align: center;padding: 30vh 0;margin: auto;">
                    <span style="color:rgb(255, 255, 255);font-size:60px;font-weight: lighter;text-shadow: 0 0 5px rgba(0, 0, 0, 0.76);">二十世纪以来</br></span>
                    <span style="color:rgb(255, 255, 255);font-size:60px;font-weight: bold;;text-shadow: 0 0 5px rgba(0, 0, 0, 0.76);">全球平均气温</br></span>
                    <span style="color:rgb(255, 255, 255);font-size:60px;font-weight: bold;;text-shadow: 0 0 5px rgba(0, 0, 0, 0.76);">上升了约</br></span>
                    <span style="color:rgb(153, 0, 0);font-size:80px;font-weight: bold;text-shadow: 0 0 5px rgba(0, 0, 0, 0.76);">1°C</br></span>
                </div>
            </div>
        </div>
        <div style="height:13000px;margin-top: 0;margin-top: -13000px;">
            <div id="div2" style="height:100vh;position:sticky;top:0;overflow: hidden;-webkit-backdrop-filter: blur(0px);backdrop-filter: blur(0px);">
                <img id="smr" src="../images/smoke/sm1.svg" style="position:absolute;width: 100%;right: -100%;">
                <img id="sml" src="../images/smoke/sm2.svg" style="position:absolute;width: 100%;left: -100%;">
                <div id="t1" style="opacity:0;width:100%;height: 100vh;position: absolute;top:0;text-align: center;-webkit-backdrop-filter: blur(20px);backdrop-filter: blur(20px);padding: 27vh 0;margin: auto;">
                    <span style="color:rgb(40, 40, 40);font-size:60px;font-weight: bold;text-shadow: 0 0 5px rgba(0, 0, 0, 0.76);">2019年</br></span>
                    <span style="color:rgb(40, 40, 40);font-size:60px;font-weight: lighter;;text-shadow: 0 0 5px rgba(0, 0, 0, 0.76);">全球共排放了</br></span>
                    <span style="color:rgb(153, 0, 0);font-size:80px;font-weight: bold;text-shadow: 0 0 5px rgba(0, 0, 0, 0.76);">591亿吨二氧化碳当量</br></span>
                    <span style="color:rgb(40, 40, 40);font-size:80px;font-weight: lighter;text-shadow: 0 0 5px rgba(0, 0, 0, 0.76);">的温室气体</br></span>
                </div>
                <div id="t2" style="opacity:0;width:100%;height: 100vh;position: absolute;top:0;text-align: center;-webkit-backdrop-filter: blur(20px);backdrop-filter: blur(20px);padding: 27vh 0;margin: auto;">
                    <span style="color:rgb(40, 40, 40);font-size:60px;font-weight: bold;text-shadow: 0 0 5px rgba(0, 0, 0, 0.76);">其中</br></span>
                    <span style="color:rgb(153, 0, 0);font-size:80px;font-weight: bold;text-shadow: 0 0 5px rgba(0, 0, 0, 0.76);">化石燃料燃烧</br></span>
                    <span style="color:rgb(40, 40, 40);font-size:60px;font-weight: lighter;;text-shadow: 0 0 5px rgba(0, 0, 0, 0.76);">是最主要的</br></span>
                    <span style="color:rgb(40, 40, 40);font-size:80px;font-weight: lighter;text-shadow: 0 0 5px rgba(0, 0, 0, 0.76);">直接排放方式</span>
                </div>
            </div>
        </div>
        <div id="div8" style="height:4000px;margin-top: -400vh;opacity: 0;">
            <div style="height:100vh;background-color: rgb(186, 218, 226);position:sticky;top: 0px;padding: 0;margin: 0;">
                <div style="opacity:1;width:100%;position:absolute;height: 100vh;text-align: left;left: 20%;top: 18vh;">
                    <span style="color:rgb(34, 34, 34);font-size:60px;font-weight: bold;text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);">而全球变暖导致了</br></span>
                    <span style="color:rgb(34, 34, 34);font-size:60px;font-weight: bold;text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);">&nbsp&nbsp&nbsp冰川消融、海平面升高、</br></span>
                    <span style="color:rgb(34, 34, 34);font-size:60px;font-weight: bold;text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp极端天气等一系列</br></span>
                    <span style="color:rgb(153, 0, 0);font-size:60px;font-weight: bold;text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp严重后果</br></span>
                </div>
                <img id="ice1" src="../images/ice/ice1.svg" style="position:absolute;width:100%;bottom: 0vh;">
                <img id="ice2" src="../images/ice/ice2.svg" style="position:absolute;width:100%;bottom: 0vh;left:-12%">
                <img id="icesea" src="../images/ice/icesea.svg" style="position:absolute;width:100%;bottom: 0vh;">
                <img id="co2ice" src="../images/single/co2.svg" style="position:absolute;height: 10vh;top:10vh;right: -10vh;">
                <img id="w3" src="../images/word/w3.svg" style="position:absolute;height: 15vh;top:15vh;right: 33vh;opacity: 1;">
            </div>
        </div>
        <div style="height:3000px;margin-top: -300vh;opacity: 1;">
            <div id="div9" style="height:100vh;background-color: rgb(144, 233, 255, 0);position:sticky;top: 0px;padding: 0;margin: 0;">
                <div id="t3" style="opacity:0;width:100%;position:absolute;height: 100vh;text-align: center;padding: 10vh 0;margin: auto;">
                    <span style="color:rgb(255, 255, 255);font-size:60px;font-weight: bold;;text-shadow: 0 0 5px rgba(0, 0, 0, 0.76);">植树造林、低碳生活</br></span>
                    <span style="color:rgb(255, 255, 255);font-size:60px;font-weight: bold;;text-shadow: 0 0 5px rgba(0, 0, 0, 0.76);">是实现碳中和的路上我们能做的</br></span>
                </div>
                <img id="fo1" src="../images/forest/for1.svg" style="position:absolute;width:100%;bottom: -90vh;">
                <img id="fo2" src="../images/forest/for2.svg" style="position:absolute;width:100%;bottom: -94vh;">
                <img id="fo3" src="../images/forest/for3.svg" style="position:absolute;width:100%;bottom: -98vh;">
                <img id="fo4" src="../images/forest/for4.svg" style="position:absolute;width:100%;bottom: -102vh;">
                <img id="bike" src="../images/single/bike.svg" style="position:absolute;width:20%;bottom: 50px;transform:scaleX(-1);right:-30%">
                <img id="co2fo" src="../images/single/co2.svg" style="position:absolute;height: 10vh;bottom:20vh;left: -10vh;">
                <img id="w5" src="../images/word/w5.svg" style="position:absolute;height: 15vh;top:45vh;left: 10vh;opacity: 0;">
            </div>
        </div>
        <div style="height:70vh;background-color: rgb(43, 161, 57);">
            <div style="opacity:1;width:100%;position:absolute;text-align: center;">
                <p style="color:rgb(255, 255, 255);font-size:60px;font-weight: bolder;text-shadow: 0 0 5px rgba(0, 0, 0, 0.76);">给二氧化碳一个归宿</br>还世界绿水青山</p>
                <span style="color:rgb(255, 255, 255);font-size:24px;text-shadow: 0 0 5px rgba(0, 0, 0, 0.76);">目前我国是世界第一排碳国家</br></span>
                <span style="color:rgb(255, 255, 255);font-size:24px;text-shadow: 0 0 5px rgba(0, 0, 0, 0.76);">计划2030年实现“碳达峰”，2060年前达到“碳中和”</br></span>
                <span style="color:rgb(255, 255, 255);font-size:24px;text-shadow: 0 0 5px rgba(0, 0, 0, 0.76);">送“碳”回家，我们在路上。</br></span>
                <p style="padding: 20px;"></p>
                    <a href="./more.html">
                        <span class="round">了解更多</span>
                    </a>
                </p>
            </div>
            
        </div>
        
    </div>
    <div class="foot">
        <p>认真做的小网站</br>Copyright@Nobody,2021-2021</p>
    </div>

    <script>
        var smoke = document.getElementById('smoke')
        document.addEventListener('scroll', function(){
            var scrolled = document.documentElement.scrollTop
            console.log(scrolled)
            // test.style.setProperty("background-color", "rgb("+(57+143*getnum(0, 500, scrolled))+","+(159+41*getnum(0, 500, scrolled))+","+(99+101*getnum(0, 500, scrolled))+")")
            smoke.style.setProperty("opacity", 0.8*getnum(500, 1000, scrolled))
            f1.style.setProperty("bottom", (-4*(1-getnum(60, 500, scrolled)))+"vh")
            f2.style.setProperty("bottom", (-8*(1-getnum(60, 500, scrolled)))+"vh")
            f3.style.setProperty("bottom", (-12*(1-getnum(60, 500, scrolled)))+"vh")
            co2f.style.setProperty("right", (-10+30*getnum(800, 1500, scrolled))+"vh")
            co2f.style.setProperty("top", (5+5*getnum(800, 1500, scrolled))+"vh")
            car.style.setProperty("left", (-25+90*getnum(1600, 3000, scrolled))+"%")
            w1.style.setProperty("opacity", getnum(1600, 2000, scrolled))
            smr.style.setProperty("right", (-100+100*getnum2(2500, 3000, 5000, 5500, scrolled))+"%")
            sml.style.setProperty("left", (-100+100*getnum2(2500, 3000, 5000, 5500, scrolled))+"%")
            div2.style.setProperty("-webkit-backdrop-filter", "blur("+50*getnum2(2500, 3000, 5000, 5500, scrolled)+"px)")
            div2.style.setProperty("backdrop-filter", "blur("+50*getnum2(2500, 3000, 5000, 5500, scrolled)+"px)")
            div2.style.setProperty("background-color", "rgb(226, 226, 226, "+getnum2(2500, 3000, 5000, 5500, scrolled)*0.8+")")
            t1.style.setProperty("opacity", getnum2(3100, 3600, 3800, 4300, scrolled))
            t2.style.setProperty("opacity", getnum2(3800, 4300, 4500, 5000, scrolled))
            div3.style.setProperty("opacity",getnum2(2500, 3000, 7800, 7900, scrolled))
            div5.style.setProperty("opacity",getnum(2500, 3000, scrolled))
            co2l.style.setProperty("left", (-10+60*getnum(5600, 6000, scrolled))+"vh")
            co2l.style.setProperty("top", (25+25*getnum(5600, 6000, scrolled))+"vh")
            w2.style.setProperty("opacity", getnum(6000, 6500, scrolled))
            s1.style.setProperty("opacity", getnum(6500, 7200, scrolled))
            s2.style.setProperty("opacity", getnum(7500, 8200, scrolled))
            s3.style.setProperty("opacity", getnum(8000, 8700, scrolled))
            div3.style.setProperty("transform","scale"+"("+(1+17*getnum2(7200, 7800, 7900, 8000, scrolled))+")")
            div4.style.setProperty("opacity",getnum(7200, 7800, scrolled))
            div7.style.setProperty("-webkit-backdrop-filter", "blur("+20*getnum(8800, 9000, scrolled)+"px)")
            div7.style.setProperty("backdrop-filter", "blur("+20*getnum(8800, 9000, scrolled)+"px)")
            div6.style.setProperty("top",(100*(1-getnum(8800, 9300, scrolled)))+"vh")
            div6.style.setProperty("transform","scale"+"("+(1+20*getnum2(9600, 10000, 10010, 10120, scrolled))+")")
            div6.style.setProperty("opacity",(1-getnum(10000, 10001, scrolled)))
            div8.style.setProperty("opacity",getnum(9700, 10000, scrolled))
            ice2.style.setProperty("left", (-12+2*getnum(10000, 11000, scrolled))+"%")
            if (scrolled > 11000) ice2.style.setProperty("left", (-10+50*getnum(11000, 12000, scrolled))+"%")
            co2ice.style.setProperty("right", (-10+30*getnum(10000, 11000, scrolled))+"vh")
            co2ice.style.setProperty("top", (10+10*getnum(10000, 11000, scrolled))+"vh")
            w3.style.setProperty("opacity", getnum(11000, 11400, scrolled))
            fo1.style.setProperty("bottom", -90*(1-getnum(11200, 12200, scrolled))+"vh")
            fo2.style.setProperty("bottom", -98*(1-getnum(11200, 12200, scrolled))+"vh")
            fo3.style.setProperty("bottom", -106*(1-getnum(11200, 12200, scrolled))+"vh")
            fo4.style.setProperty("bottom", -110*(1-getnum(11200, 12200, scrolled))+"vh")
            div9.style.setProperty("background-color", "rgb(144, 233, 255, "+getnum(11800, 12200, scrolled)+")")
            bike.style.setProperty("right", -30+70*getnum(12200, 13200, scrolled)+"%")
            co2fo.style.setProperty("left", (-10+58*getnum(11800, 12200, scrolled))+"vh")
            co2fo.style.setProperty("bottom", (20+20*getnum(11800, 12200, scrolled))+"vh")
            w5.style.setProperty("opacity", getnum(12200, 12800, scrolled))
            t3.style.setProperty("opacity", getnum(11800, 12200, scrolled))
        })
    
        function getnum(start, end, now){
            if (now < start) return 0
            if (now > end) return 1
            return (now - start)/(end-start)
        }

        function getnum2(start1, end1, start2, end2, now){
            if (now < start1) return 0
            if (now > start1 && now < end1) return (now - start1)/(end1-start1)
            if (now > end1 && now < start1) return 1
            if (now > start2 && now < end2) return (end2 - now)/(end2-start2)
            if (now > end2) return 0
        }

        function gettime(){
            return 100
        }
    </script>
    
</body>

